<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->
<mjml>
  <mj-head>
      <mj-title>{% trans %}emails.workspace_invitation.title{% endtrans %}</mj-title>
    <mj-include path="../../components/head.mjml" />
    <mj-include path="../../styles/workspace_avatar.mjml" />
  </mj-head>
  <mj-body css-class="body">
    <mj-raw>
      {% set invitation_url = resolve_front_url("WORKSPACE_INVITATION", invitation_token=invitation_token) -%}
      {% set workspace_abbreviation = workspace_name[:2].upper() -%}
    </mj-raw>
    <mj-wrapper css-class="body-content">
      <mj-include path="../../components/header-logo.mjml" />
      <mj-section mj-class="padding-top-24">
        <mj-column>
          <mj-text css-class="dm-text"
            mj-class="font-heading1 color-gray100">
            {% if receiver_name -%}
            {% trans name=receiver_name %}emails.workspace_invitation.hi_name{% endtrans %}
            {% else %}
            {% trans %}emails.workspace_invitation.hi_there{% endtrans %}
            {% endif -%}
          </mj-text>
          <mj-text css-class="dm-text"
            mj-class="font-heading2 color-gray100">
            {% trans name=sender_name %}emails.workspace_invitation.sender{% endtrans %}
          </mj-text>
        </mj-column>
      </mj-section>
      <mj-section text-align="left"
        mj-class="padding-bottom-24">
        <mj-column>
          <mj-text mj-class="padding-8">
            <table>
              <tr>
                <td style="vertical-align:top; width: 24px; height: 24px;">
                  <table>
                    <tr>
                      <td class="color-{{ workspace_color }}"
                        style="height: 24px; width: 24px; text-align: center; font-size: 11px; text-transform: uppercase; border-radius: 3px;">
                        {{ workspace_name.replace(" ", "")[:2].upper() }}</td>
                    </tr>
                  </table>
                </td>
                <td style="padding-left: 12px; vertical-align:top">
                  <p class="dm-text" mj-class="color-gray80"
                    style="margin: 3px 0 0 0; font-family: Ubuntu, Arial, Helvetica, sans-serif;">
                    {{ workspace_name }}</p>
                </td>
              </tr>
            </table>
          </mj-text>
        </mj-column>
      </mj-section>
      <mj-section>
        <mj-column>
            <mj-text css-class="dm-text"
              mj-class="font-body color-gray80 padding-bottom-24">
                {% if not receiver_name -%}
                {% trans %}emails.workspace_invitation.taiga_description{% endtrans %}
                {% endif -%}
            </mj-text>
          <mj-button css-class="btn-primary"
            mj-class="btn-primary"
            href="{{ invitation_url }}">
            {% trans %}emails.workspace_invitation.accept{% endtrans %}
          </mj-button>
          <mj-text css-class="dm-text"
            mj-class="font-body color-gray70">
            {% trans %}emails.workspace_invitation.button_not_working{% endtrans %}
          </mj-text>
        </mj-column>
      </mj-section>
      <mj-section mj-class="padding-bottom-24">
        <mj-column>
          <mj-text css-class="dm-text-gray primary-link"
            mj-class="font-body padding-bottom-24">
            <table style="border-collapse:collapse;border:0;width:100%"
              width="100%"
              cellspacing="0"
              cellpadding="0"
              border="0">
              <tbody>
                <tr>
                  <td valign="top">
                    <p
                      style="font-size:14px;line-height:21px;margin:0; text-align: left; word-break:break-all; ">
                      <a class="primary-link"
                        href="{{ invitation_url }}"
                        style="word-wrap:break-word; word-break:break-all; font-family: Ubuntu, Arial, Helvetica, sans-serif;">{{
                        invitation_url | wbr_split }}</a>
                    </p>
                  </td>
                </tr>
              </tbody>
            </table>
          </mj-text>
        </mj-column>
      </mj-section>
      <mj-column css-class="separator-bottom" mj-class="full-width"></mj-column>
      <mj-include path="../../components/footer.mjml" />
    </mj-wrapper>
  </mj-body>
</mjml>
